<template>
  <div class="login">
    <div class="anim-wrap">
      <img class="ani ani-1" src="@/assets/images/a1.png" style="width: 585px;left: 160px;bottom:100px">
      <img class="ani ani-2" src="@/assets/images/a2.png" style="width: 319px;right: 400px;top:1px">
      <img class="ani ani-3" src="@/assets/images/a3.png" style="width: 194.5px;right: 380px;bottom:200px">
      <img class="ani ani-4" src="@/assets/images/a4.png" style="width: 184px;right: 180px;bottom:160px">
      <img class="ani ani-5" src="@/assets/images/a5.png" style="width: 162px;left: 300px;top:260px">
      <img class="ani ani-6" src="@/assets/images/a6.png" style="width: 69px;right: 0px;top:0px">
      <img class="ani ani-7" src="@/assets/images/a7.png" style="width: 296px;left: 0px;top:100px">
      <img class="ani ani-8" src="@/assets/images/a8.png" style="width: 425px;left: 180px;top:0px">
      <img class="ani ani-9" src="@/assets/images/a9.png" style="width: 314px;right: 100px;top:100px">
      <img class="ani ani-10" src="@/assets/images/a10.png" style="width: 247px;left: -40px;bottom:60px">
    </div>
    <div class="login-content">
      <div class="login-title">MASTER</div>
      <div class="login-input">
        <div class="login-list">
          <p>{{$t("r.text1")}} <span>&nbsp;&nbsp;&nbsp;{{$t("r.text2")}}</span></p>
          <input v-model="password" type="password" :placeholder="this.$t('r.passwordPlacholder')">
        </div>
        <div class="login-list">
          <input v-model="confirmPass" type="password" :placeholder="this.$t('r.passwordTwoPlacholder')">
          <p><span>{{$t("r.text3")}}</span></p>
        </div>
        <div class="login-list">
          <button v-on:click="register()">{{$t("r.register")}}</button>
        </div>
      </div>
      <div class="login-bottom">{{$t("r.haveAccount")}}？
        <router-link to="/login">{{$t("l.login")}}</router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import {register} from '../../service/loginService'
  import {VerifyPassword} from '../../utils/commonUtils'

  export default {
    data() {
      return {
        password: '',
        confirmPass: ''
      }
    },
    created() {

    },
    mounted() {
      setTimeout(() => {
        console.log(this.$route)
      }, 1000)

    },
    methods: {
      register() {
        if (VerifyPassword(this.password)) {
          if (this.password !== this.confirmPass) {
            this.$message.error('重复密码错误');
          } else {
            let status = register(this.password);
            if (status) {
              this.$router.push({path: '/login'});
            } else {
              this.$message.error('注册失败');
            }
          }
        } else {
          this.$message.error('请输入不少于8位的26大小写字母或0-9数字');
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../../assets/css/anim.css');

  .login {
    position: relative;
    background: #000;
    min-height: 1100px;
    width: 100%;
    overflow: hidden;
    .anim-wrap {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      img {
        position: absolute;
        max-width: 1000px;
      }
    }
    &:before {
      content: ' ';
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover !important;
      background-image: url('../../assets/images/bg-home.jpg');
    }
    .login-content {
      width: 500px;
      min-height: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      z-index: 100;
      .login-title {
        height: 78px;
        background-color: #98889b;
        font-size: 36px;
        text-align: center;
        line-height: 78px;
        color: #fff;
      }
      .login-input {
        padding: 30px 20px;
        .login-list {
          padding: 10px 0;
          p {
            font-size: 14px;
            color: #666666;
            padding: 12px 0;
            span {
              font-size: 12px;
              color: #98889b;
            }
          }
          input {
            font-size: 12px;
            border-radius: 4px;
            border: solid 1px #ddd;
            width: 100%;
            padding: 0 15px;
            height: 34px;
            outline: none;
          }
          button {
            border-radius: 4px;
            border: none;
            background-color: #98889b;
            width: 100%;
            height: 41px;
            font-size: 14px;
            color: #fff;
            margin-top: 20px;
            outline: none;
            cursor: pointer;
          }
        }
      }
      .login-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        background-color: #efefef;
        font-size: 12px;
        a {
          color: #98889b;
        }
      }

    }
  }
</style>

